<template>
	<view class="home-container">
		<!-- 顶部课程信息 -->
		<view class="header-banner">
			<image class="banner-bg" src="/static/home/headerbanner.png" mode="widthFix"></image>
		</view>

		<!-- 课程内容导航 -->
		<view class="course-nav">
			<view class="nav-title">课程课程等内容</view>

			<!-- 分类图标 -->
			<view class="category-grid">
				<view class="category-item" v-for="(item, index) in categoryList" :key="index">
					<image class="category-icon" :src="item.icon" mode="aspectFit"></image>
					<text class="category-name">{{ item.name }}</text>
				</view>
			</view>
		</view>

		<!-- 学员库和教员库 -->
		<view class="user-database">
			<image class="database-image" src="/static/home/left.png" mode="aspectFit"></image>
			<image class="database-image" src="/static/home/right.png" mode="aspectFit"></image>
		</view>

		<!-- 专业咨询团队 -->
		<view class="consult-team">
			<view class="section-header">
				<image class="section-icon" src="/static/home/message1.png" mode="aspectFit"></image>
				<text class="section-title">专业咨询团队</text>
				<text class="section-more">更多</text>
			</view>

			<view class="team-tabs">
				<view class="tab-item active">名师推荐</view>
				<view class="tab-item">星级顾问</view>
				<view class="tab-item">专家顾问</view>
			</view>

			<!-- 顾问信息 -->
			<view class="advisor-card">
				<image class="advisor-avatar" src="/static/home/icon15.png" mode="aspectFit"></image>
				<view class="advisor-info">
					<view class="advisor-name-row">
						<text class="advisor-name">唐可可</text>
						<view class="advisor-tags">
							<text class="tag">金牌辅导员</text>
							<text class="tag">星级导师</text>
						</view>
					</view>
					<view class="advisor-desc">
						<text>● 北京师范大学学前教育硕士研究生学历</text>
						<text>● 北京市重点高中学科带头人</text>
						<text>● 学科教研组长，资深教学顾问，用丰富的教学经验...</text>
					</view>
					<view class="advisor-stats">
						<text class="price">¥200-600 /小时</text>
						<text class="consult-count">2000+咨询量 | 129人咨询</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 热门国家 -->
		<view class="hot-countries">
			<view class="section-header">
				<image class="section-icon" src="/static/home/message1.png" mode="aspectFit"></image>
				<text class="section-title">热门国家</text>
				<text class="section-more">更多 ></text>
			</view>

			<view class="country-tabs">
				<view class="country-tabs-row">
					<view class="country-tab" v-for="(country, index) in countries.slice(0, Math.ceil(countries.length / 0))"
						:key="index">
						{{ country }}
					</view>
				</view>
			</view>

			<view class="service-grid">
				<view class="service-item" v-for="(service, index) in services" :key="index">
					<image class="service-icon" :src="service.icon" mode="aspectFit"></image>
					<text class="service-name">{{ service.name }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

// 分类图标数据
const categoryList = ref([
	{ name: '学前教育', icon: '/static/home/icon1.png' },
	{ name: '大学教育', icon: '/static/home/icon2.png' },
	{ name: '艺术类目', icon: '/static/home/icon3.png' },
	{ name: '体育类目', icon: '/static/home/icon4.png' },
	{ name: '出国留学', icon: '/static/home/icon5.png' },
	{ name: '生活兴趣', icon: '/static/home/icon6.png' },
	{ name: '计算机', icon: '/static/home/icon7.png' },
	{ name: '更多科目', icon: '/static/home/icon8.png' },
]);

// 热门国家数据
const countries = ref(['美国', '英国', '加拿大', '澳洲', '新西兰']);

// 服务项目数据
const services = ref([
	{ name: '申请辅导', icon: '/static/home/icon9.png' },
	{ name: '奖学金申请', icon: '/static/home/icon10.png' },
	{ name: '就业竞争力', icon: '/static/home/icon11.png' },
	{ name: '全套服务', icon: '/static/home/icon12.png' },
]);
</script>

<style scoped lang="scss">
.home-container {
	background-color: #f5f5f5;
	min-height: 100vh;
}

/* 顶部课程信息 */
.header-banner {
	position: relative;
	width: 100%;
}

.banner-bg {
	width: 100%;
}

.banner-content {
	position: absolute;
	top: 20%;
	left: 5%;
	color: #fff;
}

.banner-title {
	font-size: 18px;
	font-weight: bold;
}

.banner-subtitle {
	font-size: 22px;
	font-weight: bold;
	margin-top: 5px;
}

.banner-desc {
	font-size: 12px;
	margin-top: 10px;
}

/* 课程内容导航 */
.course-nav {
	background-color: #fff;
	border-radius: 10px;
	margin: -20px 10px 15px;
	padding: 15px;
	position: relative;
	z-index: 1;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.nav-title {
	font-size: 14px;
	color: #666;
	margin-bottom: 15px;
}

.category-grid {
	display: flex;
	flex-wrap: wrap;
}

.category-item {
	width: 25%;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 15px;
}

.category-icon {
	width: 40px;
	height: 40px;
}

.category-name {
	font-size: 12px;
	color: #333;
	margin-top: 5px;
}

/* 学员库和教员库 */
.user-database {
	display: flex;
	justify-content: space-between;
	margin: 0 10px 15px;

	image {
		margin-bottom: -100rpx;
		margin-top: -100rpx;
		padding: 0 10rpx;
	}

}


.database-image {
	width: 90%;
}

/* 专业咨询团队 */
.consult-team,
.hot-countries {
	background-color: #fff;
	border-radius: 10px;
	margin: 0 10px 15px;
	padding: 15px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.section-header {
	display: flex;
	align-items: center;
	margin-bottom: 15px;
}

.section-icon {
	width: 20px;
	height: 20px;
	margin-right: 5px;
}

.section-title {
	font-size: 16px;
	font-weight: bold;
	color: #333;
	flex: 1;
}

.section-more {
	font-size: 12px;
	color: #999;
}

.team-tabs {
	display: flex;
	margin-bottom: 15px;
}

.country-tabs {
	margin-bottom: 15px;
}

.country-tabs-row {
	display: flex;
	margin-bottom: 10px;
}

.tab-item {
	padding: 5px 10px;
	font-size: 14px;
	color: #666;
	margin-right: 10px;
}

.tab-item.active {
	color: #2196F3;
	border-bottom: 2px solid #2196F3;
}

/* 顾问卡片 */
.advisor-card {
	display: flex;
	padding: 15px;
	border-radius: 10px;
	background-color: #f9f9f9;
}

.advisor-avatar {
	width: 60px;
	height: 60px;
	border-radius: 30px;
	margin-right: 10px;
}

.advisor-info {
	flex: 1;
}

.advisor-name-row {
	display: flex;
	align-items: center;
	margin-bottom: 5px;
}

.advisor-name {
	font-size: 16px;
	font-weight: bold;
	color: #333;
	margin-right: 10px;
}

.advisor-tags {
	display: flex;
}

.tag {
	font-size: 10px;
	color: #ff6b00;
	background-color: rgba(255, 107, 0, 0.1);
	padding: 2px 5px;
	border-radius: 3px;
	margin-right: 5px;
}

.advisor-desc {
	display: flex;
	flex-direction: column;
	font-size: 12px;
	color: #666;
	line-height: 1.5;
}

.advisor-stats {
	display: flex;
	align-items: center;
	margin-top: 5px;
	font-size: 12px;
}

.price {
	color: #ff6b00;
	margin-right: 10px;
}

.consult-count {
	color: #999;
}

/* 热门国家 */
.country-tab {
	padding: 5px 15px;
	font-size: 14px;
	color: #333;
	background-color: #f5f5f5;
	border-radius: 20px;
	margin-right: 10px;
}

.service-grid {
	display: flex;
	flex-wrap: wrap;
	margin-top: 15px;
}

.service-item {
	width: 48%;
	display: flex;
	align-items: center;
	padding: 10px 0;
	background-color: #f5f5f5;
	border-radius: 5px;
	margin-bottom: 10px;
	margin-right: 4%;
}

.service-item:nth-child(even) {
	margin-right: 0;
}

.service-icon {
	width: 30px;
	height: 30px;
	margin: 0 10px;
}

.service-name {
	font-size: 14px;
	color: #333;
}
</style>